// 基本信息
import { GatewayType } from "@/api/interface/iot";
import DialogBox from "@/components/DialogBox";
import SelectDeptList from "@/components/Sansan/SelectDeptList";
import SelectProductList from "@/components/Sansan/SelectProductList";
import { ElForm } from "element-plus";
import { defineComponent, PropType } from "vue";
import LazyUploadFile from "@/components/Upload/LazyUploadFile.vue";
import { generateSn, showTips } from "@/utils/util";
import { addGateway } from "@/api/modules/iot/gateway";
interface DeviceForm {
	[key: string]: any;
}
export default defineComponent({
	props: {
		detail: {
			type: Object as PropType<DeviceForm>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const uploadEl = ref();
		const formRule = reactive({
			sn: [{ required: true, message: "请输入网关SN", trigger: "change" }]
		});
		const validData = () => {
			formRef.value?.validate(async valid => {
				if (valid) {
					props.detail.name = props.detail.name || props.detail.sn;
					let { code, result } = await addGateway({ ...props.detail }, props.detail.type);
					let ok = showTips(code, "添加网关");
					if (ok) {
						uploadEl.value.submit({ instanceId: result.sn });
						emit("submit", ok);
					}
				}
			});
		};
		onMounted(() => {
			//默认为软网关
			if (!props.detail.type) {
				props.detail.type = GatewayType.SoftGateway;
			}
		});
		return () => {
			return (
				<DialogBox
					{...attrs}
					onConfirm={() => {
						validData();
					}}
				>
					<div class="flex">
						<div class="w-52 pr-4">
							<LazyUploadFile
								title={!props.detail.sn ? "请输入网关SN" : "点击选择网关程序"}
								ref={uploadEl}
								disabled={!props.detail.sn}
								v-model:fileUrl={props.detail.progrom}
								v-model:fileName={props.detail.progrom}
								width="100%"
								height="200px"
								emptyTips="请上传网关程序"
							></LazyUploadFile>
						</div>
						<div class="flex-1">
							<el-form model={props.detail} ref={formRef} rules={formRule} label-width="100px">
								<el-form-item label="网关SN" prop="sn">
									<el-input v-model={props.detail.sn} disabled={props.detail.id ? true : false}>
										{{
											append: () => {
												return props.detail.id ? null : (
													<el-button type="primary" link onClick={() => (props.detail.sn = generateSn())}>
														<span class="text-sm p-1 pr-1">自动生成</span>
													</el-button>
												);
											}
										}}
									</el-input>
								</el-form-item>
								<el-form-item label="网关名称" prop="name">
									<el-input v-model={props.detail.name} />
								</el-form-item>
								<el-form-item label="所属分组" prop="deptId">
									<SelectDeptList detail={props.detail} initDefault={true} />
								</el-form-item>
								<el-form-item label="产品类型" prop="productModel">
									<SelectProductList detail={props.detail} />
								</el-form-item>
							</el-form>
						</div>
					</div>
				</DialogBox>
			);
		};
	}
});
